<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-案例鼠标跟随</title>
    <style>
      body{
        width: 100%;
        height: 100%;
        background-color: pink;
        position: absolute;
      }

      img{
        position: fixed;
      }
    </style>
    <script>
      window.onload = function () {
        document.onmousemove = function (event) {
          let imgEle = document.getElementById("mifeng");
          // 获得鼠标坐标
          let clientX = event.clientX;
          let clientY = event.clientY;
          // 获取图片坐标对象
          let clientWidth = imgEle.clientWidth;
          let clientHeight = imgEle.clientHeight;
          // 让图片跟随
         // imgEle.style.position = "fixed";
          imgEle.style.left = (clientX-clientWidth/2) + "px";
          imgEle.style.top = (clientY - clientHeight/2) + "px";
        }
      }
    /* window.onload = function () {
       // 1. 获取小蜜蜂图片对象
       var imgEle = document.getElementById("mifeng");

       // 2. 给整个文档绑定鼠标移动事件
       document.onmousemove = function (event) {
         // 3. 获取鼠标中心点距离x轴和y轴原点的距离
         var clientX = event.clientX;
         var clientY = event.clientY;

         // 4. 获取图片的可见宽度和高度
         var clientWidth = imgEle.clientWidth;
         var clientHeight = imgEle.clientHeight;
         // 5. 设置图片距离左边距和顶部的距离
         imgEle.style.left = clientX - clientWidth / 2 + "px";
         imgEle.style.top = clientY - clientHeight / 2 + "px";
       }
     }*/
    </script>
</head>
<body>
  <img src="../image/动态表情22.gif" alt="图片加载" id="mifeng">
</body>
</html>